<template>
  <div>
    <div class="navigator">
      <div class="baseinfo">
        <a-row type="flex" justify="space-between" align="middle">
          <!-- <a-col :xl="{ span: 10 }" :lg="{ span: 6 }">
            <div v-if="treeDeptId" style="font-weight: bold"> 
              <div>
                <a-spin :spinning="spinning">当前部门节点达成率:{{ completedNodeRate }} 总延误天数:{{ allDelayDay }} </a-spin>
              </div>
            </div>
          </a-col> -->
          <a-col :xl="{ span: 10 }" :lg="{ span: 6 }"></a-col>
          <a-col :xl="{ span: 14 }" :lg="{ span: 18 }" class="input-ground">
            <a-input-group compact>
              <a-select
                :options="options"
                v-model="projectSubType"
                placeholder="选择细分类查询"
                title="选择细分类查询"
                @change="onChange"
                class="headcas"
                allowClear
              />
              <a-input-search
                title="按项目号、项目名称、项目经理、项目等级模糊查询"
                placeholder="按项目号、项目名称、项目经理、项目等级模糊查询"
                enter-button
                v-model="keyword"
                @search="handleSearch"
                class="headsearch"
              />
            </a-input-group>
          </a-col>
        </a-row>
        <div class="tree-main">
          <div class="content-list">
            <a-table
              class="hte-table-content"
              bordered
              :columns="columns"
              :data-source="listData"
              :rowKey="(record) => record.id"
              :loading="tableLoading"
              :pagination="ipagination"
              @change="handleTableChange"
              :scroll="{x: true}"
            >
              <template slot="projectNo" slot-scope="text, record">
                <span class="link-btn" @click="openUrl(record)">{{ text }}</span>
              </template>
              <template slot="status" slot-scope="text">
                {{ initProjectStatusText(text) }}
              </template>
              <template slot="timeList" slot-scope="text, record">
                <div class="process">
                  <ul>
                    <li
                      v-for="(items, indexs) in record.timeList"
                      :key="indexs"
                      title="温馨提示：实心代表已完成，空心代表未完成，延误或者超前的已自动计算时间，请把握好项目进度哦！"
                    >
                      <span
                        v-if="record.status != 10 && record.status != 7"
                        :class="
                          items.finishReport
                            ? items.nodeStatus == 0
                              ? 'fontgreen'
                              : items.nodeStatus == -1
                              ? 'fontred'
                              : items.nodeStatus == 1
                              ? 'fontpurple'
                              : 'fontgrey'
                            : items.nodeStatus == -1
                            ? 'fontred'
                            : items.nodeStatus == 1
                            ? 'fontpurple'
                            : 'fontgrey'
                        "
                      >
                        {{
                          items.nodeStatus == -1 && items.delayDays
                            ? '延误' + Math.abs(items.delayDays) + '天'
                            : items.nodeStatus == 1 && items.delayDays
                            ? '提前' + Math.abs(items.delayDays) + '天'
                            : ' '
                        }}
                        <br />{{
                          items.subTimeNodeCompleteRate ? '子节点完成率:' + items.subTimeNodeCompleteRate : ' '
                        }}
                      </span>
                      <span class="fontgrey" v-else></span>
                      <div
                        :class="[
                          'content-box',
                          (items.finishReport && items.nodeStatus >= 0) ||
                          (items.finishReport && items.nodeStatus == -1)
                            ? 'greencircle'
                            : items.nodeStatus == -1
                            ? 'redblankcir'
                            : 'greycircle',
                        ]"
                        v-if="record.status != 10 && record.status != 7"
                      >
                        <span class="circle"></span>
                      </div>
                      <div :class="['content-box', items.finishReport ? 'greencircle' : 'greycircle']" v-else>
                        <span class="circle"></span>
                      </div>
                      <div class="infobox">
                        <span>{{ items.timeNode }}</span>
                        <p>
                          {{
                            items.completionDateAudit
                              ? items.completionDateAudit
                              : items.completionDate
                              ? items.completionDate
                              : '--'
                          }}
                        </p>
                      </div>
                    </li>
                  </ul>
                  <div
                    v-if="record.timeList && record.timeList.length > 0"
                    class="btn-more"
                    @click="seeTimeMore(record)"
                  >
                    <span>更多
                      <a-icon class="icon-child-down" slot="suffixIcon" type="caret-down" />
                    </span>
                  </div>
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </div>
    <time-list-show-in-pop ref="timeListShowInPop"></time-list-show-in-pop>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

export default {
  components: {
    TimeListShowInPop: () => import('@/components/tools/timeListShowInPop'),
  },
  name: 'ProjectProcess',
  props: {
    treeDeptId: {
      type: Number,
      required: false,
    },
    subDeptIdByAtypeRoot: {
      type: String,
      default: '',
      required: false,
    },
    deptName: {
      type: String,
      default: '',
      required: false,
    },
    projectClass: {
      type: String,
      default: '10',
      required: false,
    },
    searchYear: {
      type: String,
      default: undefined,
      required: false,
    },
    projectStatus: {
      type: Number,
      default: null,
      required: false,
    },
  },
  data() {
    return {
      columns: [
        {
          title: '项目编号',
          dataIndex: 'projectNo',
          key: 'projectNo',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'projectNo' },
          fixed: 'left',
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          key: 'projectName',
          align: 'center',
          width: '100px',
          fixed: 'left',
        },
        {
          title: '项目经理',
          dataIndex: 'projectManager',
          key: 'projectManager',
          align: 'center',
          width: '90px',
        },
        {
          title: '等级',
          dataIndex: 'realLevel',
          key: 'realLevel',
          align: 'center',
          width: '70px',
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          align: 'center',
          width: '70px',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '当前节点',
          dataIndex: 'currTimeNodeName',
          key: 'currTimeNodeName',
          align: 'center',
          width: '100px',
        },
        {
          title: '节点达成率',
          dataIndex: 'nodeSucc',
          key: 'nodeSucc',
          align: 'center',
          width: '80px',
        },
        {
          title: '延误天数',
          dataIndex: 'delayDay',
          key: 'delayDay',
          align: 'center',
          width: '60px',
        },
        {
          title: '进度计划(关键节点)',
          dataIndex: 'timeList',
          key: 'timeList',
          align: 'center',
          scopedSlots: { customRender: 'timeList' },
        },
      ],
      listData: [],
      keyword: '',
      tableLoading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        hideOnSinglePage: false,
        total: 0,
      },
      spinning: false,
      completedNodeRate: '',
      allDelayDay: 0,
      options: [],
      projectSubType: undefined,
      tableScroll: {},
    }
  },
  mounted() {
    this.initData()
    this.initCodeInfo()
    if (document.body.clientWidth < 1450) {
      this.tableScroll = { x: 1150 }
    } else {
      this.tableScroll = { x: 1400 }
    }
    //this.syncGetDeptProjectNodeSuccAndDelay()
  },
  watch: {
    treeDeptId(newValue, oldValue) {
      console.log('process')
      this.treeDeptId = newValue
      if (newValue != oldValue) {
        this.initData()
        //this.syncGetDeptProjectNodeSuccAndDelay()
      }
    },
    projectClass(newValue, oldValue) {
      this.projectClass = newValue
      if (newValue != oldValue) {
        this.initCodeInfo()
        this.initData()
        //this.syncGetDeptProjectNodeSuccAndDelay()
      }
    },
    searchYear(newValue, oldValue) {
      this.searchYear = newValue
      if (newValue != oldValue) {
        this.initData()
        //this.syncGetDeptProjectNodeSuccAndDelay()
      }
    },
    projectStatus(newValue, oldValue) {
      this.projectStatus = newValue
      if (newValue != oldValue) {
        this.initData()
      }
    },
    //   subDeptIdByAtypeRoot(newValue, oldValue) {
    //       this.subDeptIdByAtypeRoot = newValue
    //   },
    //   deptName(newValue, oldValue) {
    //       this.deptName = newValue
    //   }
  },
  methods: {
    initCodeInfo() {
      var vm = this
      getAction('/manage/codeInfo/list', {
        column: 'code',
        order: 'Asc',
        type: '项目子类',
        isdel: 0,
        pageSize: -1,
        parentid: this.projectClass,
      })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              vm.options = []
              list.records.map((item) => {
                vm.options.push({ value: item.code, label: item.name, isLeaf: false, tilte: item.name })
              })
            }
          } else {
            this.$message.warning('查询项目子类失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询项目子类失败:' + res.message)
        })
    },
    onChange(value) {
      if (this.tableLoading) {
        return
      }
      this.initData()
    },
    selectStatusChange(value, option) {
      if (this.tableLoading) {
        return
      }
      this.initData()
    },
    syncGetDeptProjectNodeSuccAndDelay() {
      if (!this.treeDeptId) {
        return
      }
      this.spinning = true
      getAction('/techProjectReport/syncGetDeptProjectNodeSuccAndDelayByDept', {
        keyword: this.keyword,
        subDeptIdByAtypeRoot: this.subDeptIdByAtypeRoot,
        treeDeptId: this.treeDeptId,
        projectClass: this.projectClass,
        projectStatus: this.projectStatus,
        projectSubType: this.projectSubType,
        searchYear: this.searchYear,
      })
        .then((res) => {
          if (res.code === 200) {
            this.completedNodeRate = res.result.nodeSucc
            this.allDelayDay = res.result.delayDay
          } else {
            this.$message.error(res.message)
          }
          this.spinning = false
        })
        .catch((res) => {
          this.spinning = false
        })
    },
    initData() {
      if (this.tableLoading) {
        return
      }
      this.tableLoading = true
      getAction('/techProjectReport/queryAllSummaryProject', {
        keyword: this.keyword,
        subDeptIdByAtypeRoot: this.subDeptIdByAtypeRoot,
        treeDeptId: this.treeDeptId,
        projectClass: this.projectClass,
        projectStatus: this.projectStatus,
        projectSubType: this.projectSubType,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        searchYear: this.searchYear,
      })
        .then((res) => {
          if (res.code === 200) {
            this.listData = res.result.records
            this.ipagination.total = res.result.total
          } else {
            this.$message.error(res.message)
            this.ipagination.total = 0
          }
          this.tableLoading = false
        })
        .catch((res) => {
          this.tableLoading = false
        })
    },
    handleSearch() {
      if (this.tableLoading) {
        return
      }
      this.ipagination.current = 1
      this.initData()
    },
    handleTableChange(pagination, filters, sorter) {
      if (this.tableLoading) {
        return
      }
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.initData()
    },
    seeTimeMore(item) {
      if (item.id) {
        this.$refs.timeListShowInPop.doSelect(item.id, item.projectManager)
      }
    },
    initProjectStatusText(status) {
      switch (status) {
        case 2:
          return '待审批'
          break
        case 3:
          return '待上会'
          break
        case 4:
          return '执行中'
          break
        case 5:
          return '验收中'
          break
        case 6:
          return '结题'
          break
        case 10:
          return '已转储'
          break
        default:
          return '待定'
      }
    },
    openUrl(record) {
      let urlJump = this.$router.resolve({ path: `/approval?projectBuildId=${record.id}` })
      window.open(urlJump.href, '_blank')
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.dailyTask {
  height: 100%;
  font-size: 14px;
  .navigator {
    min-height: 100%;
    padding: 27px 125px 50px;
    background-color: #f5f5f5;
  }
}
.baseinfo {
  background-color: #fff;
  //padding: 30px;
  .btn-box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
/deep/ .rowClass {
  background-color: #e6f7ff;
}
.tree-main {
  display: flex;
  justify-content: flex-start;
  &.shrinkage {
    // width: 80px;
    .box-left {
      width: 50px;
      .tree-title {
        flex-flow: column;
        padding-bottom: 0;
        .bold {
          max-width: 0;
          max-width: 0;
          opacity: 0;
          width: 0;
          height: 0;
          min-width: 0;
        }
        > i {
          position: relative;
          top: -4px;
          transform: rotate(180deg);
          color: #4183d9;
        }
        //        >i{position: relative;top: 29px;transform: rotate(180deg);color: #4183d9;}
      }
    }
    .content-list {
      width: calc(100% - 50px);
    }
    .content-list-no-menu {
      width: 100%;
    }
  }
  .box-left {
    width: 185px;
    color: #333;
    border-radius: 2px;
    border: solid 1px #ededed;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
    .tree {
      overflow: auto;
    }
    .tree-title {
      padding: 14px 10px;
      border-bottom: solid 1px #e5e5e5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > i {
        cursor: pointer;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
        &:hover {
          color: #4183d9;
        }
      }
      .bold {
        color: #333;
      }
    }
    background-color: #dcdfe6;
    font-size: 16px;
    margin: 0px 10px 31px 0;
    ul {
      display: block;
    }
  }
  .content-list {
    width: 100%;
    /deep/.ant-table .ant-table-tbody .ant-table-row td {
      padding: 3px 8px !important;
    }
  }
  .process {
    padding: 0;
    display: flex;
    position: relative;
    ul {
      padding: 0;
      display: flex;
      justify-content: flex-start;
      li {
        display: flex;
        flex-direction: column;
        width: 120px;
        align-items: center;
        position: relative;
        > span {
          // drcary
          display: block;
          height: 55px;
          padding: 0 5px 16px;
          margin-bottom: -16px;
          font-size: 13px;
          display: flex;
          align-items: center;
        }
        .content-box {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          &:after {
            width: 100%;
            height: 1px;
            border-top: 1px dashed #bcbcbc;
            left: -50%;
            top: 50%;
          }
        }
        .infobox {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #787878;
          //padding-top: 6px;
          span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 56px;
          }
          p {
            font-size: 12px;
            color: #999;
          }
        }
        &:first-of-type {
          .content-box:after {
            display: none;
          }
        }
      }
    }
    .btn-more {
      position: absolute;
      right: -7px;
      display: flex;
      justify-content: center;    
      align-items: center;
      height: 100%;
      background: #fff;
      z-index: 1;
      transition: background 0.3s;
      span{
        cursor: pointer;
        color: #999;
        display: inline-block;
        font-weight: normal;
        text-align: center;
        font-size: 13px;
        padding: 0 2px 0 7px;
        margin-top: -10px;
        .icon-child-down{margin-left: 0;}        
        &:hover {
          color: #0581ca;
          background-color: #e4e4e4;
          .icon-child-down {
            color: #0581ca;
          }
        }
      }
    }
  }
  .process ul li .content-box {
    &.greencircle {
      .circle {
        border-color: #3fa883;
        position: relative;
        &:before {
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          background-color: #3fa883;
        }
      }
      &:after {
        border-color: #3fa883 !important;
      }
    }
    &.redblankcir {
      .circle {
        border-color: #f17777;
      }
      &:after {
        border-color: #f17777 !important;
      }
    }
    .circle {
      width: 16px;
      height: 16px;
      border-radius: 100%;
      border: 1px solid #bcbcbc;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    &:after {
      content: '';
      position: absolute;
    }
  }
  .fontred {
    color: #f34141;
  }
  .fontgreen {
    color: #76c1b4;
  }
  .fontpurple {
    color: #ae81ff;
  }
  .fontgrey {
    color: grey;
  }
}
.input-ground {
  display: flex;
  justify-content: space-between;
  align-items: right;
  margin: 5px 0;
  .ant-input-group.ant-input-group-compact {
    display: flex;justify-content: flex-end;
  }
  button {
    margin-left: 10px;
  }
  /deep/ span.ant-radio + * {
    padding: 0;
  }
}

/deep/ .ant-cascader-picker .ant-cascader-picker-label {
  margin-top: -15px !important;
}
/deep/ .ant-cascader-picker-arrow {
  margin-top: -11px !important;
}
/deep/.ant-cascader-picker-clear {
  margin-top: -10px;
}

.headSelect {
  width: 180px;
}
.headcas {
  width: 180px;
}
.headsearch {
  width: 450px;  
}
.link-btn{
    color: #177cb7;cursor: pointer;
    &:hover{color: #249af4;}
  }
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
  .btn-more{background: #e6f7ff;}
}
@media only screen and (max-width: 1650px) {
  .tree-main .process > ul > li {
    width: 120px;
  }
}
@media only screen and (max-width: 1450px) {
  .tree-main .process > ul > li {
    width: 75px;
  }
  .process ul li > span {
    height: 69px !important;
  }
}
</style>